<template>
  <view>
    <view class="fileUploadCell">
      <slot></slot>
      <!-- 录像 -->
      <view class="photoVedio" v-if="type === 'submit'">
        <view class="box" @click="chooseVideo" v-if="videoList.length < 4">
          <image class="btnicon" src="/static/img/icons/video.png"> </image>
          <view class="text">录像</view>
        </view>
        <view class="box" v-else>
          <image class="btnicon" src="/static/img/icons/dis_video.png"> </image>
          <view class="text">录像</view>
        </view>
      </view>
    </view>
    <view class="albumContainer">
      <block v-if="videoList.length > 0">
        <block v-for="(item, index) in videoList" :key="index">
          <video
            :id="'t' + index"
            class="vdoStyle"
            :src="item.path ? baseurl+'/'+item.path: baseurl+'/'+item.result.path"
            @click="playvideo"
            controls
            @ended="endPlay"
            @longpress="delVedio"
            :data-index="index"
          ></video>
        </block>
        <!-- <view v-show="showVedio"> -->
        <!-- </view> -->
      </block>
      <block v-else>
        <view class="imgStyle">
          <view class="imgText">暂无视频</view>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
import {BASE_URL, UPLOAD_URL} from "../../util/api";

export default {
  name: "Vedio",
  props: {
    type: {
      type: String,
      default: 'submit'
    },
    oldVideoList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      baseurl: BASE_URL,
      // 视频
      videoContext: null,
      videoList: []
    }
  },
  mounted () {
    if (this.oldVideoList.length > 0) {
      this.videoList = [...this.oldVideoList]
    }
  },
  methods: {
    init () {
      this.videoList = []
    },
    // 录像
    chooseVideo(index) {
      let _self = this
      uni.chooseVideo({
        maxDuration: 30, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
        count: 1,
        success: (res) => {
          uni.showLoading({
            title: '加载中'
          });
          // console.log("debug1------", res);
          const tempFilePath = res.tempFilePath;
          uni.uploadFile({
            url : UPLOAD_URL,
            filePath: tempFilePath,
            name: 'file',
            formData: {
              'type': 'video'
            },
            success: function (uploadFileRes) {
              uni.hideLoading();
              // console.log('debug2------', uploadFileRes.data);
              _self.videoList.push(JSON.parse(uploadFileRes.data));
              _self.$emit('takeVideo', _self.videoList)
            }
          });
        },
      });
    },
    playvideo(e) {
      const idName = "t" + e.currentTarget.dataset.index; //获取当前长按图片下标
      this.videoContext = uni.createVideoContext(idName);
      this.$nextTick(function() {
        this.videoContext.requestFullScreen({ direction: 0 });
        this.videoContext.play();
      });
    },
    endPlay() {
      this.videoContext.stop();
      this.videoContext.exitFullScreen();
    },
    // 长按删除录像
    delVedio(e) {
      let that = this
      // console.log("delVedio----", e);
      const index = e.currentTarget.dataset.index; //获取当前长按图片下标
      // console.log("index----", index);
      uni.showModal({
        title: "删除录像",
        content: "确定删除录像?",
        success: (res) => {
          if (res.confirm) {
            // console.log("点击确定了");
            that.videoList.splice(index, 1);
            that.$emit('delVedio', index)
          } else if (res.cancel) {
            // console.log("点击取消了");
            return false;
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.fileUploadCell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 26rpx 32rpx;
  font-size: 28rpx;
  line-height: 54rpx;
  color: #606266;
  background-color: #fff;
  text-align: left;
}
.photoVedio {
  display: flex;
}
.box {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}
.btnicon {
  width: 80rpx;
  height: 80rpx;
}
.albumContainer {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 5rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}
.imgStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  width: 140rpx;
  height: 140rpx;
  margin: 0 20rpx 20rpx;
  border-radius: 10rpx;
  border: 1rpx solid #eee;
}
.vdoStyle {
  width: 320rpx;
  height: 240rpx;
  margin: 0 20rpx 20rpx;
  border-radius: 10rpx;
  border: 1rpx solid #eee;
}
</style>
